---
metaTitle: Visually Hidden
metaDescription: Hides content from the screen in an accessible way.
name: visually-hidden
---

# Visually Hidden

<Description>Hides content from the screen in an accessible way.</Description>

<Highlights
	features={[
		"Visually hides content while preserving it for assistive technology.",
	]}
/>

## Installation

Install the component from your command line.

```bash
npm install @radix-ui/react-visually-hidden
```

## Anatomy

Import the component.

```jsx
import { VisuallyHidden } from "radix-ui";

export default () => <VisuallyHidden.Root />;
```

## Basic example

Use the visually hidden primitive.

```jsx
import { VisuallyHidden } from "radix-ui";
import { GearIcon } from "@radix-ui/react-icons";

export default () => (
	<button>
		<GearIcon />
		<VisuallyHidden.Root>Settings</VisuallyHidden.Root>
	</button>
);
```

## API Reference

### Root

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

<PropsTable
	data={[
		{
			name: "asChild",
			required: false,
			type: "boolean",
			default: "false",
			description: (
				<>
					Change the default rendered element for the one passed as a child,
					merging their props and behavior.
					<br />
					<br />
					Read our <a href="../guides/composition">Composition</a> guide for
					more details.
				</>
			),
		},
	]}
/>

## Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with `aria-label` or `aria-labelledby`.
